import React, { Component } from 'react'
import style from './styles/PayResult.less'
import classnames from "classnames";
import ShareOrPayLayer from "components/ShareOrPayLayer";
import wxShare from "commons/wxShare";
//img
import paySucess from './images/paySucess.png';
import redpack from './images/redpack.png';

import bottomIcon from 'images/icon_bottom.png';
//api
import { page as pageDetail } from "api_zhoujianyi/front/app/trade/pay";
import { bean_proportion } from "api_xukaiyu/app/beans";
import { recommendList } from "api_liuhaojie/app/goods";
import { create_red_packet } from 'api_xukaiyu/app/share_redpacket';
import util from "commons/util";

export default class PayResult extends Component {
    constructor() {
        super();
        this.state = {
            recommondGood: [],
            detail: [],
            percent: 0,
            showShareOrPayLayer: false
        }
    }
    componentDidMount() {
        // 如果是交易号
        let tradeNo = this.props.match.params.tradeNo;
        if (this.props.match.params.tradeNo) {
            pageDetail({
                tradeNo: tradeNo
            }).then(res => {
                this.setState({
                    detail: res.data
                })
            })
        }

        // 推荐列表
        recommendList().then(res => {
            this.setState({
                recommondGood: res.data || []
            })
        })

        //黑豆兑换比例
        bean_proportion().then(data => {
            this.setState({
                percent: data.data
            })
        })
    }
    render() {
        const { recommondGood, detail, percent } = this.state;
        return (
            <div className={style.container}>
                <div className={style.header}>
                    <div className={style.payResult}>
                        <div className={style.result}><img src={paySucess} alt="" />支付成功</div>
                        <div className={style.payTips}>出卡啦权益为你节省￥{detail.saveAmount}</div>
                    </div>
                    <div className={style.orderDetail}>
                        <div className={style.goodDetail}>
                            <div className={style.goodImg}><img src={detail.goodsIcon} alt="" /></div>
                            <div className={style.orderInfo}>
                                <div className={style.title}>{detail.goodsTypeName}</div>
                                <div className={style.orderTime}>下单时间：{detail.gmtCreated}</div>
                                <div className={style.goodNum}>数量：{detail.quantity}</div>
                                <div className={style.goodPrice}>合计：<span>￥{detail.tradeAmount}</span></div>
                            </div>
                        </div>
                        <div className={style.checkCode}>
                            <div className={style.checkTips}>购买商品的券码请点击查看券码</div>
                            <div className={style.checkBtn} onClick={() => { location.replace(`./couponCode.html?tradeNo=${this.props.match.params.tradeNo}`) }}>查看券码</div>
                        </div>
                    </div>
                    <div className={style.advertising}><img src={redpack} alt="" onClick={() => {
                        create_red_packet({ orderNo: detail.orderNos[0]}).then(data => {
                            let shareData = {};
                            let pathNameArr = location.pathname.split("/");
                            pathNameArr.pop();
                            shareData.link = location.origin + pathNameArr.join("/") + `/fightRedEnvelope.html#/GetCoupon/${data.data}`;
                            shareData.title = `送你一个大红包，最高5元！手慢无`;
                            shareData.desc = "天天拆红包，天天省点钱";
                            shareData.imgUrl = 'https://oss.weidai.com.cn/primKa8fks.png';
                            wxShare(shareData);
                            this.setState({
                                showShareOrPayLayer: true,
                                showDialog: false
                            })
                        })
                    }} /></div>
                    <div className={style.haidou} onClick={() => { location.href = "./hibeans.html#/Home" }}>
                        <div className={style.getHaidou}>订单完成后预计返{Math.floor(detail.tradeAmount || 0) * percent}嘿豆</div>
                        <div className={style.tips}>嘿豆支持全场抵现</div>
                    </div>
                </div>
                <div className={style.recommend}>
                    <div className={style.title}><span></span>猜你喜欢</div>
                    <div className={style.seckillGoods}>
                        {
                            recommondGood.map((item, index) => {
                                return (
                                    <div key={item.id} className={style.seckillGoodsItem} onClick={() => {
                                        location.href = `./goods.html#/Detail/${item.id}`;
                                    }}>
                                        <div className={style.seckillGoodsItemImg}>
                                            <div className={classnames(style.seckillGoodsItemImgContainer, "wdskeleton-translate")} style={{ backgroundImage: `url(${item.goodsIcon})` }}></div>
                                            {
                                                item.stockNum <= 0 && <div className={style.seckillGoodsItemSoldout}><div>售罄</div></div>
                                            }
                                            {
                                                item.stockNum <= 10 && item.stockNum > 0 && <div className={style.seckillGoodsItemWillSoldout}>即将售罄</div>
                                            }
                                            {
                                                item.isNoob == 1 && <div className={style.seckillGoodsItemNews}>首单特价</div>
                                            }
                                        </div>
                                        <div className={style.seckillGoodsItemInfo}>
                                            <div className={style.seckillGoodsItemName}><span>{item.skuName}</span></div>
                                            <div className={style.seckillGoodsItemPrice}>¥{item.price}</div>
                                            <div className={style.recommendPrice}>¥{item.recommendPrice}</div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    {/* <div className={style.recommendGoodList}>
                        {
                            recommondGood.map((item, index) => {
                                return <div key={index} className={style.goodInfo}>
                                    <div className={style.goodImg}>
                                        <div className={style.firstOrder}>首单特价</div>
                                        <div className={style.sellOut}>即将售罄</div>
                                        <img src={paySucess} alt="" />
                                    </div>
                                    <div className={style.detail}>
                                        <div className={style.gooodName}>优酷视频会员月卡</div>
                                        <div className={style.goodPrice}>¥199.99</div>
                                        <div className={style.originalCost}>¥899.99</div>
                                    </div>
                                </div>
                            })
                        }
                    </div> */}
                </div>
                <div className={style.bottomIcon}><img src={bottomIcon} alt="" /></div>
                <ShareOrPayLayer show={this.state.showShareOrPayLayer} onClick={() => {
                    this.setState({
                        showShareOrPayLayer: false
                    })
                }} />
            </div>
        )
    }
}
